<template>
  <view class="container">
    <unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="options" :collection="collectionList" field="user_id,start_time,end_time,datas,calorie,shabao" :where="queryWhere" :getone="true" :manual="true">
      <view v-if="error">{{error.message}}</view>
      <view v-else-if="loading">
        <uni-load-more :contentText="loadMore" status="loading"></uni-load-more>
      </view>
      <view v-else-if="data">
        
        <view class="">
        	<u-row>
        		<u-col span="4">
        			<u--image :showLoading="true" :src="shabaoImg" width="120px" height="120px" @click="click"></u--image>
        		</u-col>
        		<u-col span="8">
        			<u-cell-group :border="border">
        				<u-cell :border="border" icon="integral-fill" title="编号" :value="data.shabao.id"></u-cell>
        				<u-cell :border="border" icon="integral-fill" title="重量" :value="data.shabao.weight"></u-cell>
        				<u-cell :border="border" icon="integral-fill" title="填充" :value="data.shabao.inside"></u-cell>
        			</u-cell-group>
        		</u-col>
        	</u-row>
        </view>
				<view class="demo-layout bg-death">
					<view class="card-head">
						卡路里
					</view>
					<view class="card-body">
						{{data.calorie}}
					</view>
				</view>
        <view style="text-align: center;">
          <uni-dateformat class="myTime bg-blue" :threshold="[0, 0]" :date="data.start_time"></uni-dateformat>~
          <uni-dateformat class="myTime bg-green" :threshold="[0, 0]" :date="data.end_time"></uni-dateformat>
        </view>
        <view class="charts-box">
            <qiun-data-charts type="line"
			      :opts="opts"
			      :localdata="DataAnalysis(data.datas)"
						:ontouch="true" />
        </view>
        
      </view>
    </unicloud-db>
    
  </view>
</template>

<script>
  // 由schema2code生成，包含校验规则和enum静态数据
  import { enumConverter } from '../../js_sdk/validator/batch.js'
  const db = uniCloud.database()

  export default {
    data() {
      return {
				border:false,
				shabaoImg: "/static/shadai.png",
        queryWhere: '',
        collectionList: "batch",
        loadMore: {
          contentdown: '',
          contentrefresh: '',
          contentnomore: ''
        },
        options: {
          // 将scheme enum 属性静态数据中的value转成text
          ...enumConverter
        },
				opts: {
					color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					padding: [15,10,0,15],
					enableScroll: true,
					legend: {},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 15,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				}
      }
    },
    onLoad(e) {
      this._id = e.id
    },
    onReady() {
      if (this._id) {
        this.queryWhere = '_id=="' + this._id + '"'
      }
    },
    methods: {
      DataAnalysis(data) {
      	var jsondata = []
      	data.forEach((item, index) => {
      		var row = {}
      		row.value = item
      		row.text = String(index+1)
      		row.group = "击打力度"
      		jsondata.push(row)
      	} )
      	return jsondata;
      }
    }
  }
</script>

<style>
  .container {
    padding: 10px;
		height: 100vh;
  }
	.myTime{
		color: white;
		border-radius: 3px;
		line-height: 40px;
		font-size: 10px;
	}
	.demo-layout {
		height: 100px;
		margin: 10px;
		
		border-radius: 6px;
		color: #FFFFFF;
		font-weight: bold;
	}
	.card-head{
		font-size: 16px;
		padding: 5px;
	}
	.card-body{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 10px;
		font-size: 30px;
	}
	.bg-blue {
		background: #4BB6FE;
	}
	.bg-green {
		background: #4ADA7B;
	}
	.bg-death {
		background: #FFB25A;
	}
	.charts-box {
	    width: 100%;
	    height: 300px;
	}
	
</style>
